<!--
  This file is a part of the open-eBackup project.
  This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0.
  If a copy of the MPL was not distributed with this file, You can obtain one at
  http://mozilla.org/MPL/2.0/.
  
  Copyright (c) [2024] Huawei Technologies Co.,Ltd.
  
  THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
  EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
  MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
  -->

<div class="aui-fullpage init-config-container">
  <div *ngIf="isModify" class="aui-header-1">
    <h1>{{ 'common_network_config_label' | i18n }}</h1>
  </div>
  <ng-container *ngIf="!appUtilsService.isDistributed && !appUtilsService.isDecouple">
    <div [ngClass]="{
              'container-visible2': activeIndex !== 3,
              'container-hidden': activeIndex === 3,
              'modify-block': isModify
            }">
      <div class="aui-header-5" *ngIf="!isModify">
        <h1>{{ (!isModify ? 'common_init_config_label': 'common_network_config_label') | i18n }}</h1>
      </div>
      <lv-group lvGutter="16px" [ngClass]="{'init-display': !isModify, 'network-display': isModify}">
        <!-- 节点选择用于网络配置界面 -->
        <lv-group lvDirection="vertical" lvGutter="8px" class="left-menus" *ngIf="isModify">
          <h2>{{ 'protection_statefulset_node_label' | i18n }}</h2>
          <lv-group lvGutter="16px" class="node-group">
            <lv-search [lvFocus]="true" [(ngModel)]="nodeName" (lvSearch)="search()">
            </lv-search>
            <button class="aui-button-icon" lv-button lvSize="auto" (click)="refresh()">
              <i lv-icon="lv-icon-refresh" [lvColorState]="true"></i>
            </button>
          </lv-group>
          <div class="cluster-menus custom-cluster-menus">
            <lv-menu #menu [lvMenus]="clusterMenus" [lvMode]="'icon'" [lvTheme]="'light'" [lvActiveItemId]="activeNode"
              [lvLabelTemplate]="clusterNodeTpl" (lvItemClick)="nodeChange($event)"></lv-menu>
          </div>
        </lv-group>
        <lv-group [ngClass]="{'insight-padding-none': isModify}" *ngIf="!isModify || !!clusterMenus.length">
          <div [ngClass]="{'aui-block2':!isModify, 'list-container': isModify}">
            <div [ngClass]="{
                      'container-visible2': activeIndex === 0,
                      'container-hidden': activeIndex !== 0,
                      'init-limit-height': activeIndex === 0 && !isModify,
                      'modify-limit-height': isModify
                    }">
              <div *ngIf="!isModify" class="header">
                <div class="aui-gutter-column-md">
                  <h2>{{ 'common_config_mode_label' | i18n }}</h2>
                </div>
                <lv-radio-group #group [(ngModel)]="selected" [lvGroupName]="'configGroup'">
                  <lv-group lvGutter="16px" lvWrap="true">
                    <ng-container *ngFor="let item of cardData">
                      <lv-radio [lvViewType]="'custom'" [lvValue]="item.value">
                        <div class="card-box"
                          [ngClass]="{ 'select': group.isChecked(item.value),'card-box-en':i18n.isEn }">
                          <h3 class="box-title">{{item.label}}</h3>
                          <div class="box-content">
                            <p>{{ item.content }}</p>
                          </div>
                        </div>
                      </lv-radio>
                    </ng-container>
                  </lv-group>
                </lv-radio-group>
              </div>
              <div class="aui-gutter-column-sm" *ngIf="!isModify">
                <h2>{{ 'common_storage_auth_label' | i18n }}</h2>
              </div>

              <lv-form [formGroup]="formGroup" *ngIf="!isModify">
                <lv-group lvGutter="48px">
                  <lv-form-column class="right-interval-username" lvWidth="400px">
                    <lv-form-item>
                      <lv-form-label lvRequired>
                        {{ 'common_username_label' | i18n }}
                        <i lv-icon="aui-icon-help"
                          lv-tooltip="{{'common_storage_username_desc_label'| i18n: [baseUtilService.getProductName()]}}"
                           class="configform-constraint" lvColorState="true"></i>
                      </lv-form-label>
                      <lv-form-control [lvErrorTip]="nameErrorTip">
                        <input lv-input type="text" formControlName="username" autocomplete="new-password" />
                      </lv-form-control>
                    </lv-form-item>
                  </lv-form-column>
                  <lv-form-column class="right-interval-password" lvWidth="400px">
                    <lv-form-item>
                      <lv-form-label lvRequired>{{
                        'common_password_label' | i18n
                        }}</lv-form-label>
                      <lv-form-control [lvErrorTip]="pwdErrorTip">
                        <aui-inupt-with-eye formControlName="password" [lvDisabled]="isCertify"
                          autocomplete="new-password" [lvPasteAllowed]="false"
                          (keyup.enter)="certification()"></aui-inupt-with-eye>
                      </lv-form-control>
                    </lv-form-item>
                  </lv-form-column>
                </lv-group>
                <lv-form-item style="margin-top:16px">
                  <lv-form-control>
                    <button lv-button (click)="certification()" [disabled]="formGroup.invalid || isCertify">
                      {{ 'common_auth_label' | i18n }}
                    </button>
                  </lv-form-control>
                </lv-form-item>
              </lv-form>
              <div class="modifyOperation" *ngIf="isModify">
                <h2>{{getCurrentNodeName()}}</h2>
                <span *ngIf="isModify && !modifying">
                  <lv-group lvGutter="4px" (click)="modifyChange()" class="aui-link">
                    <img src="assets/img/setting.svg" />
                    <span class="text-setting">{{'common_modify_label' | i18n}}</span>
                  </lv-group>
                  <lv-group lvGutter="4px" *ngIf="modifying" class="aui-link-disabled">
                    <img src="assets/img/setting_gray.svg" />
                    <span class="text-setting">{{'common_modify_label' | i18n}}</span>
                  </lv-group>
                </span>
              </div>
              <div class="limit-height">
                <ng-container *ngIf="selected === 1 && isCertify">
                  <aui-configuring-ports [componentData]="componentData"
                    (onStatusChange)="configPortStatusChange($event)">
                  </aui-configuring-ports>
                </ng-container>
                <ng-container *ngIf="(selected === 0 && isCertify) || isModify">
                  <aui-manual-config-port [componentData]="componentData" [activeIndex]="activeIndex"
                    [isModify]="!!isModify" [modifying]="modifying" [memberEsn]="activeNode"
                    (onStatusChange)="manualConfigPortStatusChange($event)">
                  </aui-manual-config-port>
                </ng-container>
              </div>
            </div>
          </div>
          <div class="bottom-btn-container" *ngIf="isModify && modifying">
            <lv-group lvGutter="16px" class="modify-button">
              <button lv-button lvType="default" (click)="modifyChange()" class="modify-button-content">
                {{'common_cancel_label' | i18n}}
              </button>
              <button lv-button lvType="primary" (click)="createInitConfig()" [disabled]="okBtnDisabled"
                class="modify-button-content">
                {{ 'common_valid_ok_label' | i18n }}
              </button>
            </lv-group>
          </div>

          <lv-group [ngClass]="{
            'container-visible': activeIndex !== 3,
            'container-hidden': activeIndex === 3,
            'init-button': activeIndex !== 3
          }" *ngIf="!isModify">
            <button lv-button lvType="primary" (click)="createInitConfig()" [disabled]="okBtnDisabled" *ngIf="!isModify"
              class="init-button-content">
              {{ 'common_ok_label' | i18n }}
            </button>
          </lv-group>
        </lv-group>
      </lv-group>

    </div>
    <div [ngClass]="{
      'container-visible2': activeIndex === 3,
      'container-hidden': activeIndex !== 3
    }">
      <div class="aui-block process-height" [ngClass]="{'container-visible2': !!isModify}">
        <aui-init-config-process [componentData]="componentData" [isModify]="!!isModify" [memberEsn]="activeNode"
          (onResetChange)="onResetChange($event)">
        </aui-init-config-process>
      </div>
    </div>
  </ng-container>

  <div *ngIf="appUtilsService.isDistributed" style="height:100%">
    <aui-distributed-init></aui-distributed-init>
  </div>

  <div *ngIf="appUtilsService.isDecouple" style="height:100%">
    <aui-decouple-init></aui-decouple-init>
  </div>
</div>

<ng-template #messageTpl>
  <span [innerHTML]="'common_leave_network_config_tip_label'|i18n"></span>
</ng-template>

<ng-template #clusterNodeTpl let-data>
  <lv-group lvDirection="vertical" lvGutter="4px">
    <div class="aui-text-help-sm">{{getRoleLabel(data.role)}}</div>
    <div>{{ data.label }}</div>
    <div class="aui-text-help-sm">
      <aui-status [value]="data.status" type="Cluster_Status">
      </aui-status>
    </div>
  </lv-group>
</ng-template>
